<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>内外滚动条同步</title>
        <style>
            .outer {
                position: relative;
                overflow: auto; /* 启用滚动 */
                width: 80vw; /* 视口宽度的80% */
                height: 50vh; /* 视口高度的50% */
                border: 2px solid #000;
            }

            .inner {
                padding: 20px;
                width: 120vw; /* 视口宽度的120% */
                height: 200vh; /* 视口高度的200% */
                background-color: lightgrey;
            }
        </style>
    </head>
    <body>
        <div class="outer" id="outer">
            <div class="inner" id="inner">大屏自动刷新的技术实现方案</div>
        </div>
        <script>
            let dataList;
            // 使用node来启一个服务
            const source = new EventSource("http://localhost:9800/getlist");
            // readyState
            // 0 可能是第一次链接，也可能是断开链接了又重新链接，客户端和服务器正在链接，还没有链接上
            // 1 客户端和服务器链接上了，就可以接受服务器数据
            // 2 彻底断开链接并且不在重连
            console.log("source==>", source);
            console.log(EventSource.CONNECTING); // 0
            console.log(EventSource.OPEN); // 1
            console.log(EventSource.CLOSED); // 2

            // open事件是 客户端和服务器链接上触发
            source.onopen = function (event) {
                console.log("onopen===>", event);
            };
            // message 事件 是服务器向客户度发送消息时触发
            source.onmessage = function (event) {
                // 服务端发送的数据 event.data
                dataList = JSON.parse(event.data);
                console.log("onmessage===>", dataList);
            };
            // 是服务器和客户端 链接出错时触发
            source.onerror = function (event) {
                console.log("onerror===>", event);
            };
        </script>
    </body>
</html>
